<template>
  <div class="container">
    <el-card>
      <!-- 条件搜索框 -->
      <div class="input">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="searchForm.username" placeholder="用户名" clearable />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="searchForm.phone" placeholder="手机号" clearable />
          </el-form-item>
          <!-- <el-form-item label="用户类型">
            <el-select v-model="searchForm.userType" clearable placeholder="用户类型">
              <el-option label="用户" value="0" />
              <el-option label="心理咨询师" value="1" />
              <el-option label="管理员" value="2" />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="findUserList">查询</el-button>
          </el-form-item>
          <!-- <el-button type="primary" style="margin-left:570px" @click="dialogVisibleAdd = true">添加管理员</el-button> -->
        </el-form>
      </div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        stripe
        fit
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <!-- <el-table-column
          prop="name"
          label="姓名"
          width="150"
        /> -->
        <el-table-column
          prop="address"
          label="地址"
        />
        />
        <!-- <el-table-column
          prop="idCard"
          label="身份证号码"
        /> -->
        <el-table-column
          fixed="right"
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="dialogVisible = true, check(scope.row.id)">查看</el-button>
            <el-button type="primary" size="small" @click="dialogVisibleEdit = true, check(scope.row.id)">编辑</el-button>
            <el-popconfirm
              :title="text1 + scope.row.username + text2"
              style="margin-left:10px"
              confirm-button-text="删除"
              cancel-button-text="取消"
              @confirm="del(scope.row.id)"
              @cancel="cancel"
            >
              <el-button slot="reference" size="small" type="primary">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        ref="page"
        background
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="pageCurrentChange"
      />
      <!-- 查看dialog -->
      <template>
        <el-dialog
          title="个人信息"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose"
          center
        >
          <span>
            <el-descriptions :model="selfInfo" class="margin-top" :column="3" :size="size" border>
              <el-descriptions-item v-model="selfInfo.username">
                <template slot="label">
                  <i class="el-icon-user" />
                  用户名
                </template>
                {{ selfInfo.username }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user" />
                  姓名
                </template>
                {{ selfInfo.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-postcard" />
                  身份证号码
                </template>
                {{ selfInfo.idCard }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone" />
                  手机号
                </template>
                {{ selfInfo.phone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline" />
                  居住地
                </template>
                {{ selfInfo.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets" />
                  邮箱
                </template>
                {{ selfInfo.email }}
              </el-descriptions-item>
            </el-descriptions>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </template>
      <!-- 编辑dialog -->
      <template>
        <el-dialog
          title="个人信息"
          :visible.sync="dialogVisibleEdit"
          width="60%"
          :before-close="handleClose"
          center
          show-close
        >
          <span>
            <el-descriptions :model="editInfo" class="margin-top" :column="3" :size="size" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user" />
                  用户名
                </template>
                <el-input
                  v-model="editInfo.username"
                  placeholder="请输入内容"
                  clearable
                />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user" />
                  真实姓名
                </template>
                <el-input
                  v-model="editInfo.name"
                  placeholder="请输入内容"
                  clearable
                />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone" />
                  手机号
                </template>
                <el-input
                  v-model="editInfo.phone"
                  placeholder="请输入内容"
                  clearable
                />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline" />
                  居住地
                </template>
                <el-input
                  v-model="editInfo.address"
                  placeholder="请输入内容"
                  clearable
                />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets" />
                  邮箱
                </template>
                <el-input
                  v-model="editInfo.email"
                  placeholder="请输入内容"
                  clearable
                />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-postcard" />
                  身份证号码
                </template>
                <el-input
                  v-model="editInfo.idCard"
                  placeholder="请输入内容"
                  clearable
                />
              </el-descriptions-item>
            </el-descriptions>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleEdit = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
          </span>
        </el-dialog>
      </template>
      <!-- 添加管理员 -->
      <el-dialog
        title="添加管理员"
        :visible.sync="dialogVisibleAdd"
        width="30%"
        center
      >
        <span>
          <el-form :label-position="labelPosition" label-width="auto" :model="addForm">
            <el-form-item label="用户名" prop="addForm.username">
              <el-input v-model="addForm.username" />
            </el-form-item>
            <!-- <el-form-item label="姓名" prop="addForm.name">
              <el-input v-model="addForm.name" />
            </el-form-item> -->
            <el-form-item label="手机号" prop="addForm.phone">
              <el-input v-model="addForm.phone" />
            </el-form-item>
            <!-- <el-form-item label="身份证号码" prop="addForm.idCard">
              <el-input v-model="addForm.idCard" />
            </el-form-item> -->
            <el-form-item label="邮箱" prop="addForm.email">
              <el-input v-model="addForm.email" />
            </el-form-item>
            <el-form-item label="地址" prop="addForm.username">
              <el-input v-model="addForm.address" />
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleAdd = false, onSubmit">添加</el-button>
          <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalCount: 0,
      input: '',
      text1: '确定删除',
      text2: '的信息吗?',
      size: 'medium',
      dialogVisible: false,
      dialogVisibleEdit: false,
      dialogVisibleAdd: false,
      searchForm: {
        username: '',
        phone: '',
        pageNum: 1
      },
      tableData: [],
      selfInfo: {
        username: ''
      },
      editInfo: {
        username: '',
        phone: '',
        address: '',
        email: '',
        idCard: '',
        name: ''
      },
      labelPosition: 'right',
      addForm: {
        username: '',
        phone: '',
        address: '',
        email: '',
        idCard: '',
        name: ''
      }
    }
  },
  watch: {},
  mounted: function() {
    this.findUserList()
  },
  methods: {
    //  用户管理 查询所有用户
    findUserList() {
      this.$store.dispatch('admin/findUserList', this.searchForm).then(res => {
        this.tableData = res.list
        this.totalCount = res.total
      })
    },
    //  用户管理 删除用户
    del(id) {
      var adminId = localStorage.getItem('adminId')
      const data = { id: id, adminId: adminId }
      this.$store.dispatch('user/delUser', data).then(() => {
        this.findUserList()
      })
    },
    cancel() {

    },
    //  用户管理 查看用户详情
    check(id) {
      this.$store.dispatch('user/findUserById', id).then(res => {
        this.selfInfo = res
        this.editInfo = res
      })
    },
    //  用户管理 编辑用户信息
    edit() {
      this.$store.dispatch('user/edit', this.editInfo).then(res => {
        alert('修改成功')
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.dialogVisibleEdit = false
    },
    pageCurrentChange(val) {
      this.searchForm.pageNum = val
      this.findUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  margin-left: 15px;
  margin-top: 20px;
}
.el-card{
  margin-right: 10px;
}
.el-pagination{
  text-align: right;
  margin-top: 20px;
}
</style>
